// 继承类
import base from "../base.js";
// Api接口
import studentsApi from "../../api/students.js";
// 用来返回学生列表
import config from "../../util/config.js";

export default class extends base {

    constructor(props) {
        super(props);
        this._id = props._id;
        this.data;

    };
    // 通过_id查询学生
    async getstudent() {
        this.data = await studentsApi.getOne(this._id)
        this.rerender()
    }




    rerender() {
        this.stuName.html(`${this.data.name}`)
        this.imgS.html(
            `
            ${ this.data.imgs.map(item=>`<img src="${config["resource-server"]}${item}" alt="图片" style="width: 100px;">` ).join('')}
                   `)
    }
    moutend() {
        this.getstudent()
    }
    handle() {

        layui.upload.render({
            elem: '#test1',
            url: '/resource/student/upload/' //改成您自己的上传接口
                ,
            multiple: true,
            data: {
                _id: () => this.data._id
            },
            done: () => {
                this.getstudent()
            }
        });
        this.imgS.on("click", "img", async e => {

            const url = e.target.src.replace(config["resource-server"], '')
            //  获取当前学生的_id
            const _id = this._id
            const data = await studentsApi.deleteImg({
                url,
                _id
            })
            this.getstudent()

        })


    };
    render() {
        this.el.html(
            `  
        <div>
           <h1>
         添加学生图片
           </h1>
           <p>学生姓名</p>
           <p class="stuName"></p>
   <div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
  <img class="layui-upload-img" id="demo1">
  <p id="demoText"></p>
  
  </div>
</div> 
<div class="imgS">
</div> 


   
          `);

        this.imgS = $(".imgS")
        this.stuName = $(".stuName")
    };;
}